<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目列表</title>
<%@ include file="/pages/common/base/Head.jsp"%>
<script type="text/javascript"
	src="/${res.contextPath}/js/user/daily-life-statistics.js?verison=${res.version}"></script>
<script type="text/javascript"
	src="/${res.contextPath}/js/echarts/echarts.min.js?verison=${res.version}" charset='utf-8'></script>

<script>
	$(function() {
		DailyLifeStatistics.initPage("${res.contextPath}");
	});
</script>
</head>
<body>
	<div id="main" style="width:1000px;height:500px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var app = {};
		option = null;
		var app = {};
		// 指定图表的配置项和数据
		var posList = [ 'left', 'right', 'top', 'bottom', 'inside',
				'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
				'insideTopLeft', 'insideTopRight', 'insideBottomLeft',
				'insideBottomRight' ];

		app.configParameters = {
			rotate : {
				min : -90,
				max : 90
			},
			align : {
				options : {
					left : 'left',
					center : 'center',
					right : 'right'
				}
			},
			verticalAlign : {
				options : {
					top : 'top',
					middle : 'middle',
					bottom : 'bottom'
				}
			},
			position : {
				options : echarts.util.reduce(posList, function(map, pos) {
					map[pos] = pos;
					return map;
				}, {})
			},
			distance : {
				min : 0,
				max : 100
			}
		};

		app.config = {
			rotate : 90,
			align : 'left',
			verticalAlign : 'middle',
			position : 'insideBottom',
			distance : 15,
			onChange : function() {
				var labelOption = {
					normal : {
						rotate : app.config.rotate,
						align : app.config.align,
						verticalAlign : app.config.verticalAlign,
						position : app.config.position,
						distance : app.config.distance
					}
				};
				myChart.setOption({
					series : [ {
						label : labelOption
					}, {
						label : labelOption
					}, {
						label : labelOption
					}, {
						label : labelOption
					} ]
				});
			}
		};

		var labelOption = {
			normal : {
				show : true,
				position : app.config.position,
				distance : app.config.distance,
				align : app.config.align,
				verticalAlign : app.config.verticalAlign,
				rotate : app.config.rotate,
				formatter : '{c}  {name|{a}}',
				fontSize : 16,
				rich : {
					name : {
						textBorderColor : '#fff'
					}
				}
			}
		};

		option = {
			color : [ '#003366', '#006699', '#4cabce', '#e5323e' ],
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'shadow'
				}
			},
			legend : {
				data : [ '学习', '锻炼', '早起', '早睡' ]
			},
			toolbox : {
				show : true,
				orient : 'vertical',
				left : 'right',
				top : 'center',
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar', 'stack', 'tiled' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : ${date},
				axisTick : {
					show : false
				}
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '学习',
				type : 'bar',
				barGap : 0,
				label : labelOption,
				data : ${isReadList}
			}, {
				name : '锻炼',
				type : 'bar',
				label : labelOption,
				data : ${isExerciseList}
			}, {
				name : '早起',
				type : 'bar',
				label : labelOption,
				data : ${isGetUpEarlyList}
			}, {
				name : '早睡',
				type : 'bar',
				label : labelOption,
				data : ${isSleepEarlyList}
			} ]
		};
		// 使用刚指定的配置项和数据显示图表。
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
	</script>
</body>
</html>